<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>节点关系</title>
        <style type="text/css">
            .wrapper { border: 1px solid gray ; }
            .container { margin: 10px ; border: 1px solid blue ; padding: 10px ;}
        </style>
    </head>
    <body>

        <h3>节点关系</h3>

        <div class="wrapper">
            <div class="container first">
                <span>熊大</span>
                <span>熊二</span>
                <span>熊三</span>
                <span>熊四</span>
            </div>
            <div class="container second">
                <span>大牛</span>
                <span>二牛</span>
                <span>三牛</span>
                <span>四牛</span>
            </div>
            <div class="container third">
                <span>喵大</span>
                <span>喵二</span>
                <span>喵三</span>
                <span>喵四</span>
            </div>
        </div>
        
        <script type="text/javascript">
            const s = document.querySelector( '.second' );

            console.log( 'nodeType: ' , s.nodeType );
            console.log( s.nodeType === s.ELEMENT_NODE );
            console.log( s.nodeType === Node.ELEMENT_NODE );
            console.log( 'nodeName: ' , s.nodeName );

            console.log( '- '.repeat(10) );

            console.log( 'parentNode: ' , s.parentNode );
            console.log( 'parentElement: ' , s.parentElement );
            console.log( 'previousSibling: ' , s.previousSibling );
            console.log( 'previous Element: ' , s.previousSibling.previousSibling );
            console.log( 'nextSibling: ' , s.nextSibling );
            console.log( 'next Element: ' , s.nextSibling.nextSibling );

            console.log( 'hasChildNodes() : ' , s.hasChildNodes() );
            console.log( 'firstChild: ' , s.firstChild );
            console.log( 'first Element: ' , s.firstChild.nextSibling );
            console.log( 'lastChild: ' , s.lastChild );
            console.log( 'last Element: ' , s.lastChild.previousSibling );

            console.log( 'childNodes: ' , s.childNodes );

            console.log( s.ownerDocument === document );

            console.log( 'textContent: ' , s.textContent );
        </script>

    </body>
</html>